<template>
	<div id="channel_edit" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				编辑渠道
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row">
					<label class="label">
						<span>*</span>
						渠道名称
					</label>
					<el-input v-model="param.name" id="name" style="width: 4rem;" maxLength="10" placeholder="" clearable></el-input>
				</div>
				
				<div class="row row_2">
					<label class="label">
						<span>*</span>
						渠道类型
					</label>
					<div class="radio_group">
						<label class="radio" v-for="item in channelMode" @click="param.channelType = item.value">
							<span class="radio_circle" :class="param.channelType==item.value? 'radio_active' : ''"></span>
							<span class="radio_name">{{item.name}}</span>
						</label>
					</div>
				</div>
				
				<div class="row">
					<label class="label">排序</label>
					<el-input v-model="param.oderby" id="oderby" maxLength="4" style="width: 2rem;" placeholder="">
					</el-input>
				</div>
				
				<div class="row">
					<label class="label">备注</label>
					<el-input v-model="param.remark" id="remark" maxLength="50" style="width: 4rem;" placeholder="" clearable></el-input>
				</div>
				
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">保 存</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict;

export default {
	data : function() {
		return {
			show : false,
			open : false,
			param : {},
			channelMode : null
		}
	},
	watch : {
		"param.oderby" : function(val) {
			this.param.oderby = tool.parseInt(val);
		}
	},
	methods : {
		init : function(channel) {
			vm.show = true;
			vm.open = true;
			vm.param = tool.clone(channel);
			vm.param._wait = "";
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		sure : function() {
			
			//验证规则
			var rules = [{
				judge : vm.param.name,
				focus : $("#channel_edit #name"),
				tips : tips.blank
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			
			var param = tool.clone(vm.param);
			tool.change("","0",param,["oderby"]);
			
			api.channelUpdate(param).then(function(data) {
				tool.message({ showClose: true, message: "修改成功", type: 'success' });
				vm.$emit('callback');
			    vm.cancel();
			})
			
		},
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		vm.channelMode = dict["channel_mode"];
	}
}
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped>
	
	.panel {
		width: 7rem;
	}
	.radio_group {
		width: 5.4rem;
		vertical-align: top;
	}
	.form {
		padding: 0 0.3rem 0 0.2rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		line-height: 0.5rem;
	}
	.row_2 {
		line-height: 0.36rem;
		padding: 0.1rem 0;
	}
	.label {
		width: 0.9rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.1rem;
	}
	.label>span {
		color: red;
		display: inline-block;
		width: 0.1rem;
		position: relative;
		top: 0.02rem;
	}
</style>